<template>
  <div>
    <h1>{{ item.topic_title }}</h1>
    <el-row style="color: rgba(0,0,0,0.31)">
      <el-col :span="6" :offset="6">发布时间 <i class="el-icon-time"></i> {{ item.topic_timestamp }}</el-col>
      <el-col :span="4"><i class="el-icon-thumb"></i>{{ item.topic_like }}喜欢</el-col>

    </el-row>
    <el-col :span="16" :offset="4">
      <el-row style="margin-top: 30px;margin-bottom: 30px;background-color: rgba(0,0,0,0.09)">
        <el-col :offset="6" :span="2">
          <el-image :src="iconList[item.topic_uid%10]" style="border-radius: 100px"></el-image>
        </el-col>
        <el-col :span="6">
          <el-row>
            <el-col :span="12" :offset="0"
                    style="padding-left: 30px;padding-top: 20px;font-weight: 700;font-size: 20px">
              {{ nameList[item.topic_uid % 10] }}
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="18" :offset="0"
                    style="padding-left: 30px;padding-top: 20px;font-weight: 300;font-size: 8px;color: #535353">
              粉丝：{{ 314 + random % 1000 }} 文章：{{ 20 + random % 100 }}
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-col>
    <el-col :span="16" :offset="4"> {{ item.topic_maintext }}</el-col>
  </div>


</template>

<script>
import img1 from "@/assets/img/HealLogo.png";
import img2 from "@/assets/img/HealLogo.png";
import img3 from "@/assets/img/HealLogo.png";

export default {
  name: "PageVideo",
  data() {
    return {
      ip: this.GLOBAL.ip,
      port: this.GLOBAL.port,

      random: null,
      color: '#de6401',
      item: this.$route.query.item,
      items: this.$route.query.items,
      value1: true,
      inputSearch: '',
      tableData: [{
        vid: '01',
        name: '网上视频1',
        date: '2022-7-6'
      }, {
        vid: '02',
        name: '网上视频1',
        date: '2022-7-6'
      },],
      imgUrls: [
        {
          name: '',
          image: img1,
        },
        {
          name: '',
          image: img2,
        },
        {
          name: '',
          image: img3,
        },],
      // imgUrls: [img1,img2,img3],
      nameList: [
        '老中医',
        '小中医',
        '小坤坤',
        '小宗桑',
        '老剑姬',
        '小鱼人',
        '老船长',
        '老盖伦',
        '小阿里',
        '托儿索',
      ],
      iconList: [
        "https://tse2-mm.cn.bing.net/th/id/OIP-C.mHJez2m2xE75YL9hZjcDgQAAAA?w=203&h=203&c=7&r=0&o=5&pid=1.7",
        'https://tse3-mm.cn.bing.net/th/id/OIP-C.2qXvtit5DoIXr4eT68LMVwAAAA?w=198&h=198&c=7&r=0&o=5&dpr=1.25&pid=1.7',
          "https://tse4-mm.cn.bing.net/th/id/OIP-C.jGtJ-wzAnljkHT0_zKsrlwAAAA?w=198&h=198&c=7&r=0&o=5&dpr=1.25&pid=1.7",
          "https://tse4-mm.cn.bing.net/th/id/OIP-C.YrUweIgWjRIU0CAg_ikerAAAAA?w=203&h=203&c=7&r=0&o=5&dpr=1.25&pid=1.7",
          "https://tse2-mm.cn.bing.net/th/id/OIP-C.20CBgW6YGvhRU5UfSbmZXwAAAA?w=203&h=203&c=7&r=0&o=5&pid=1.7",
          "https://tse2-mm.cn.bing.net/th/id/OIP-C.0AND_aVUQVwI4ncFZgDItgAAAA?w=202&h=203&c=7&r=0&o=5&pid=1.7",
          "https://tse2-mm.cn.bing.net/th/id/OIP-C.vS3mNNO7rWdIjDlwVgzwzAAAAA?w=203&h=203&c=7&r=0&o=5&pid=1.7",
          "https://tse4-mm.cn.bing.net/th/id/OIP-C.tHV5wcmpiqQtaWA5iEFXqgAAAA?w=180&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7",
          "https://tse3-mm.cn.bing.net/th/id/OIP-C.QXQseC3lXV-xD7oj8N3yTwAAAA?w=203&h=203&c=7&r=0&o=5&dpr=1.25&pid=1.7",
          "https://tse1-mm.cn.bing.net/th/id/OIP-C.R-Me4wxZsQUDiATM4mUK2gAAAA?w=162&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7",
          "https://tse2-mm.cn.bing.net/th/id/OIP-C.w5SB59pLYjQu55sUL4cmrgAAAA?w=180&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7",
      ]
    }
  },

  methods: {    // url格式验证
    isHttpUrl(url) {
      const reg_url = /https?:\/\/[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?/;
      return reg_url.test(url)
    },


    like() {
      var that = this;
      this.color = 'red';
      this.$http.get("http://" + that.ip + ":" + that.port + "/video/like?id=" + that.item.video_vid)
          .then(function (response) {
            console.log(response);
            that.$message({
              message: "赞+1",
              type: 'success'
            });
          }).catch(function (err) {
        console.log(err);
        that.$message.error(
            '网络错误点在失败');
      });
    },
  },
  created() {
    this.random = Math.floor(Math.random() * 1000);
  }

}
</script>


<style>
.el-main {
  display: block;
  flex: 1;
  flex-basis: auto;
  /* overflow: auto; */
  /* box-sizing: border-box; */
  /* padding: 20px; */
}
</style>
<style scoped>
/*@import url("//unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css");*/

#app {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.el-header, .el-footer {
  background-color: rgb(173, 217, 210);
  color: #333;
  text-align: center;
  line-height: 0px;
}

.el-aside {
  background-color: rgb(188, 221, 222);
  color: #333;
  text-align: center;
  height: auto;
}

.el-main {
  background-color: #e2f2f8;
  color: #333;
  height: 500px;
  text-align: center;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.left {
  float: left;
}

span {
  padding: 5px;
}

searchInput {
  margin-left: 50px;
  float: right;
}

</style>
